<template>
  <transition name="fade">
    <div class="wrap">
      <div class="search_wrap">
        <span @click="back">返回</span>
        <div  class="search">
          <form action="" @submit.prevent="search">
            <input id="input" v-model="val_" placeholder="津猫" ref="input" type="search">
          </form>
          <b @click="search(true)"></b>
        </div>
      </div>
      <item-list :data="items_data" @selectItem="selectItem"></item-list>
      <div v-show="!val_" class="words_wrap">
        <p>热门搜索</p>
        <ul>
          <li @click="select_search" v-for="(item,index) in words">{{item}}</li>
        </ul>
      </div>
      <p style="margin-top: 15px; margin-bottom: 15px; color: #999" v-show="!items_data.length&&!isloading&&!isInit&&searchVal">抱歉没找到 ...</p>
      <p style="margin-top: 15px; margin-bottom: 15px; color: #999" v-show="isInit">试着搜搜吧 ...</p>
      <p style="margin-top: 15px; margin-bottom: 15px; color: #999" v-show="isloading">加载中 ...</p>
      <p style="    margin-top: 15px;color: rgb(153, 153, 153);margin-bottom: 15px;" v-show="!is_more">没有更多了 ...</p>
      <router-view></router-view>
    </div>
  </transition>
</template>

<script type="text/ecmascript-6">
  import itemList from 'components/item_list'
  import {search_items, common_search_word} from 'api/search'
  import {w_scroll_top} from 'assets/dom/dom'
  import {get_cookie} from 'assets/cookie/cookie'
  import {mapGetters, mapMutations} from 'vuex'

  export default {
    name: 'search',
    data() {
      return {
        items_data: [],
        isloading: false,
        isInit: true,
        page: 1,
        val_: "",
        is_more: true,
        words: []
      }
    },
    props: [],
    created() {
      this.brand_window_scroll()
      this.search_words()
      this.search()
    },
    mounted() {

    },
    computed: {
      ...mapGetters([
        'searchVal'
      ])
    },
    methods: {
      brand_window_scroll() {
        this.$parent.scroll_name_search = () => {
          if ((document.body.clientHeight - document.documentElement.clientHeight <= w_scroll_top() + 100) && !this.isloading) {
            if (this.$route.path === "/search" && this.items_data.length && this.is_more && !this.isloading) {
              this.search_items()
            }
          }
        }
        window.removeEventListener("scroll", this.$parent.scroll_name_search)
        window.addEventListener("scroll", this.$parent.scroll_name_search)
      },
      search_items(first) {
        this.isloading = true
        search_items({
          token:'915117d71e867b5f5921083e57c7e5cf3d1c63be',
          search: this.searchVal.replace(/^\s*|\s*$/g, ""),
          page: this.page
        }).then((res) => {
          if (res.status === 200) {
            const _res = res.data
            if (_res.resStatus === 0) {
              this.is_more = _res.data.isMore
              if (this.is_more) {
                this.page++
              }
              if (first) {
                console.log(_res.data)
                this.items_data = _res.data.list
                w_scroll_top(0)
              } else {
                this.items_data = this.items_data.concat(_res.data.list)
              }

            } else {
              this.items_data = [];
            }
            this.isloading = false
          }
        }, () => {
          this.items_data = [];
          this.isloading = false
        })
      },
      search_words() {
        common_search_word({}).then((res) => {
          if (res.status === 200) {
            const _res = res.data
            if (_res.resStatus === 0) {
              this.words = _res.data
            }
          }
        })
      },
      select_search(e) {
        this.setSearchVal(e.target.textContent)
        this.val_=this.searchVal;
        this.search()
      },
      search(btn){
        if(this.searchVal===""&&!btn){ //如果是刷新将拿不到vuex的存值
          this.setSearchVal("津猫")
          return
        }else if(this.searchVal===""&&btn){// 值为空但是是按钮提交的
          this.setSearchVal("津猫")
        }
        this.isInit = false
        this.page = 1
        this.is_more = true
        this.val_=this.searchVal
        this.search_items(true)

      },
      selectItem(id) {
        this.$router.push({
          path: 'search/detial',
          query: {
            itemId: id
          }
        })
      },
      back(){
        this.$router.back()
      },
      ...mapMutations({
        setSearchVal: 'SET_SEARCH_VAL'
      })
    },
    components: {
      itemList
    },
    watch: {
      val_(newVal){
        this.setSearchVal(newVal)
          if (this.searchVal === '') {
            w_scroll_top(0)
            this.items_data = []
            this.isInit = true
            this.is_more = true
          }
      },
      '$route'(to, from) {
        if(from.path==='/index'||from.path==='/allClass'){
          if(this.searchVal===this.val_){
            return
          }
          this.search()
        }
      }
    }
  }
</script>

<style scoped lang="scss">

  .fade-enter-active /* .fade-leave-active below version 2.1.8 */
  {
    opacity: 0;
  }

  .fade-enter-to /* .fade-leave-active below version 2.1.8 */
  {
    opacity: 1;
    transition: all 0.35s;
  }
  .wrap{
   padding-top: 48px;
  }
  .words_wrap {
    width: 90%;
    margin: 0 auto;
    > p {
      text-align: left;
      margin-left: 15px;
      margin-top: 11px;
      color: #aaa;
    }
    > ul {
      overflow: hidden;
      > li {
        float: left;
        padding: 8px;
        margin-left: 15px;
        margin-top: 8px;
        border: 1px solid #aaa;
        border-radius: 5px;
        color: #555;
      }
    }
  }
  .search_wrap{
    position: fixed;
    width: 100%;
    z-index: 10;
    top: 0;
    background-color: #25abea;
    padding-bottom: 6px;
    padding-top: 8px;
    max-width: 768px;
    min-width: 320px;
    >span{
      float: left;
      font-size: 13px;
      margin-top: 5px;
      margin-left: 10px;
      font-weight: bold;
      margin-right: 8px;
      padding-top: 5px;
      padding-bottom: 5px;
      letter-spacing: 2px;
      color: #eee;
    }
  }
  .search {
    overflow: hidden;
    position: relative;
    margin-right: 14px;
    height: 32px;
    >form {
      background-color: #93d4f4;
      padding-top: 7px;
      border-radius:10px;
      padding-left: 10px;
      height: 33px;
      padding-right: 44px;
      input::-webkit-input-placeholder {
        color: #aaa;
      }
      input::-moz-placeholder {
        color: #aaa;
      }
      input:-moz-placeholder {
        color: #aaa;
      }
      input:-ms-input-placeholder {
        color: #aaa;
      }
      input[type=search]::-webkit-search-cancel-button {
        -webkit-appearance: none; //此处只是去掉默认的小×
      }
      input {
        width: 100%;
        height: 18px;
        line-height: 18px;
        outline: none;
        border: none;
        color: #fff;
        font-size: 14px;
        letter-spacing: 1px;
        background-color: transparent;
      }
    }
    > b {
      position: absolute;
      top: 0;
      right: 9px;
      width: 32px;
      height: 32px;
      background-image: url("../assets/img/22.png");
      background-size: 80% 80%;
      background-position-y: 42%;
      background-repeat: no-repeat;
      transition: transform 0.12s;
      cursor: pointer;
      &:active {

        transform: scale(1.2);
      }
    }
  }
</style>
